<template>
  <div class="venue_warp">
    <!-- 主kv -->
    <main-k-v />
    <!-- 会场介绍 -->
    <!-- 指定tab -->
    <tab :active="tabActive" :tabList="tabNameList" v-show="showTab"></tab>
    <!-- 可排序区域==优惠券，人气大牌，热卖会场，推荐大牌，特价爆款，好物推荐  -->
    <div class="floor_warp">
      <template>
        <div v-for="(item, index) in sortFloor" :key="index" :class="item.path">
          <template
            v-if="
              item.floorType != 3 &&
                item.floorDetailInfo &&
                item.floorDetailInfo.length > 0
            "
          >
            <title-c :type="item.floorType" :name="item.name"></title-c>
          </template>
          <template
            v-if="
              item.floorType === 3 &&
                item.floorDetailInfo &&
                item.floorDetailInfo.length > 0
            "
          >
            <coupon></coupon>
          </template>
          <template
            v-if="
              item.floorType === 6 &&
                item.floorDetailInfo &&
                item.floorDetailInfo.length > 0
            "
          >
            <major-suit :list="resArr"></major-suit>
          </template>
          <template
            v-if="
              item.floorType === 5 &&
                item.floorDetailInfo &&
                item.floorDetailInfo.length > 0
            "
          >
            <hot-venue></hot-venue>
          </template>
          <template
            v-if="
              item.floorType === 4 &&
                item.floorDetailInfo &&
                item.floorDetailInfo.length > 0
            "
          >
            <popular-brand />
          </template>
          <template
            v-if="
              item.floorType === 7 &&
                item.floorDetailInfo &&
                item.floorDetailInfo.length > 0
            "
          >
            <hot-sale-product />
          </template>
        </div>
      </template>
    </div>
    <div class="haowu">
      <title-c :type="8" :name="haowuFloor.name"></title-c>
      <product-recommend :tabs="tabList"></product-recommend>
    </div>
    <div class="venue_btn">
      <div v-if="isEnd">转发赚钱</div>
      <div class="noEnd" v-if="!isEnd">
        <span class="time">{{ countDownText }}</span
        ><span class="btn">转发赚钱</span>
      </div>
    </div>
  </div>
</template>
<script>
import hotVenue from './components/hotVenue.vue';
import titleC from './components/title.vue';
import coupon from './components/coupon.vue';
import productRecommend from './components/productRecommend.vue';
import majorSuit from './components/majorSuit.vue';
import mainKV from './components/mainKV.vue';
import hotSaleProduct from './components/hotSaleProduct.vue';
import popularBrand from './components/popularBrand.vue';
import tab from './components/tab.vue';
import { throttle } from 'lodash';
export default {
  components: {
    mainKV,
    hotSaleProduct,
    popularBrand,
    hotVenue,
    titleC,
    coupon,
    majorSuit,
    tab,
    productRecommend
  },
  data() {
    return {
      isEnd: false,
      currentTime: 0, // 服务端时间
      clientCurrentTime: 0, // 客户端时间
      timer: null,
      countDownText: '',
      kvFloor: null, // 主kv楼层数据
      descFloor: null, // 介绍楼层数据
      sortFloor: [], // 可排序楼层数据
      haowuFloor: null, // 好物推荐
      tabNameList: [],
      tabActive: 0,
      showTab: false,
      throttleed: null,
      resArr: [],
      tabList: [
        { name: '人气大牌', id: 1 },
        { name: '热卖会场', id: 2 },
        { name: '推荐大牌', id: 3 },
        { name: '特价爆款', id: 4 }
      ],
      allFloor: [
        {
          floorType: 1,
          path: 'intro',
          floorDetailInfo: ['hahah ']
        },
        {
          floorType: 2,
          path: 'kv'
        },
        {
          floorType: 3,
          path: 'coupon',
          floorDetailInfo: ['hahah ']
        },
        {
          floorType: 4,
          path: 'renqida',
          name: '人气大牌',
          floorDetailInfo: ['hahah ']
        },
        {
          floorType: 5,
          path: 'remai',
          name: '热卖会场',
          floorDetailInfo: ['hahah ']
        },
        {
          floorType: 6,
          path: 'tuijian',
          name: '推荐大牌',
          floorDetailInfo: ['hahah ']
        },
        {
          floorType: 7,
          path: 'tejia',
          name: '特价爆款',
          floorDetailInfo: ['hahah ']
        },
        {
          floorType: 8,
          path: 'haowu',
          name: '好物推荐',
          floorDetailInfo: ['hahah ']
        }
      ]
    };
  },
  mounted() {
    this.init();
    this.$nextTick(() => {
      this.throttleed = throttle(this.scrollHandle, 500, {
        leading: false,
        trailing: true
      });
      window.addEventListener('scroll', this.throttleed);
    });
  },
  methods: {
    goBrand() {
      // todo
    },
    goProductDetail() {
      // todo
    },
    init() {
      this.currentTime = new Date().getTime();
      this.countDown();
      this.getVenueInfo();
    },
    sortFloorhadle() {
      console.log(this.list.length);
      const half = Math.ceil(this.list.length / 2);
      const arr1 = this.list.slice(0, half);
      const arr2 = this.list.slice(half, this.list.length);
      const resArr = [];
      arr1.forEach((item, index) => {
        const arr = [];
        arr.push(item);
        arr.push(arr2[index]);
        resArr.push(arr);
      });
      this.resArr = resArr;
    },
    scrollHandle() {
      let currentTab = '';
      let kvDom = document.querySelector('.main-kv-wrap');
      let bottom = kvDom.getBoundingClientRect().bottom;
      // 推荐大牌
      this.showTab = bottom <= 0;
      this.showTab = true;
      const dom = document.querySelector('.venue_warp .tuijian');
      console.error(dom.getBoundingClientRect());
      const domT = dom.getBoundingClientRect().top;
      if (domT < 200 && domT > 0) {
        currentTab = 'tuijian';
        this.showTab = true;
      }
      // 热卖会场
      const venueDom = document.querySelector('.venue_warp .remai');
      const venueDomT = venueDom.getBoundingClientRect().top;
      if (venueDomT < 200 && venueDomT > 0) {
        currentTab = 'remai';
      }
      // 特价爆款
      const tejiaDom = document.querySelector('.venue_warp .tejia');
      const tejiaDomT = tejiaDom.getBoundingClientRect().top;
      if (tejiaDomT < 200 && tejiaDomT > 0) {
        currentTab = 'tejia';
      }
      // 人气大牌
      const renqiDom = document.querySelector('.venue_warp .renqida');
      const renqiDomT = renqiDom.getBoundingClientRect().top;
      if (renqiDomT < 200 && renqiDomT > 0) {
        currentTab = 'renqida';
      }
      // 好物推荐
      const haowuDom = document.querySelector('.venue_warp .haowu');
      const haowuDomT = haowuDom.getBoundingClientRect().top;
      if (haowuDomT < 200 && haowuDomT > 0) {
        currentTab = 'haowu';
      }
      this.tabNameList.forEach((item, index) => {
        if (item.path === currentTab) {
          this.tabActive = index;
        }
      });
    },
    getVenueInfo() {
      // 内部逻辑
      [this.kvFloor] = this.allFloor;
      // this.kvFloor.kvImg = this.allFloor[1].floorDetailInfo.conferenceKVImageUrl;
      this.sortFloor = this.allFloor.slice(2, 7);
      [this.haowuFloor] = this.allFloor.slice(7, 8);
      console.error(
        'this.sortFloorthis.sortFloorthis.sortFloorthis.sortFloorthis.sortFloorthis.sortFloor',
        this.haowuFloor
      );
      this.allFloor.slice(2, 8).forEach((item, index) => {
        if (item.floorDetailInfo && item.floorDetailInfo.length > 0) {
          if (index !== 0) {
            this.tabNameList.push(item);
          }
        }
      });
      this.$api
        .queryConference618({ conferenceId: 1 })
        .then(res => {
          console.log('res', res);
        })
        .catch(() => {
          console.error('aaa');
        });
    },
    countDown() {
      const currTime = this.currentTime;
      this.clientCurrentTime = new Date().getTime();
      const endTime = 1591632000000;
      const differTime = endTime - currTime;
      let d;
      let h;
      let m;
      let s;
      if (differTime > 0) {
        d = Math.floor(differTime / 1000 / 60 / 60 / 24);
        h = Math.floor((differTime / 1000 / 60 / 60) % 24);
        m = Math.floor((differTime / 1000 / 60) % 60);
        s = Math.floor((differTime / 1000) % 60);
        d = d < 10 ? `0${d}` : d;
        h = h < 10 ? `0${h}` : h;
        m = m < 10 ? `0${m}` : m;
        s = s < 10 ? `0${s}` : s;
        this.countDownText =
          d === '00'
            ? `距活动结束仅剩：${h}时${m}分${s}秒`
            : `距活动结束仅剩：${d}天${d}时${m}分`;
        const steeptime = d === '00' ? 1000 : 60000;
        this.timer = setTimeout(() => {
          clearTimeout(this.timer);
          const diffTimeExecutedCode =
            new Date().getTime() - this.clientCurrentTime;
          this.currentTime = Number(this.currentTime) + diffTimeExecutedCode;
          this.countDown();
        }, steeptime);
      } else {
        this.isEnd = true;
      }
    }
  },
  destroyed() {
    window.removeEventListener('scroll', this.throttleed);
  }
};
</script>
<style lang="scss" scoped>
.venue_warp {
  position: relative;
  background-color: #7e170f;
  min-height: 100vh;
  padding-bottom: 60px;
  .kv_bg {
    width: 100%;
  }
  .floor_warp {
    box-sizing: border-box;
  }
  .venue_btn {
    div {
      width: 345px;
      height: 40px;
      background: rgba(255, 0, 0, 1);
      border-radius: 20px;
      position: fixed;
      bottom: 17px;
      left: 15px;
      text-align: center;
      line-height: 40px;
      z-index: 999;
      font-size: 15px;
      font-family: Alibaba PuHuiTi;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
    .noEnd {
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 5px 0 15px;
      box-sizing: border-box;
      .btn {
        width: 108px;
        height: 30px;
        background: rgba(255, 0, 0, 1);
        border-radius: 15px;
        font-size: 15px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        line-height: 30px;
        color: rgba(255, 255, 255, 1);
      }
      .time {
        font-size: 11px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}
</style>
